import React from 'react';

import ConvertPNG from '@/assets/images/auth/Convert.png';
import { ModalContext } from '@/shared/context/ModalContext';
import { useMetaTag } from '@/shared/lib/hooks';
import { FlexWrapper, Modal } from '@/shared/ui';
import Image from 'next/image';
import { useWindowSize } from 'usehooks-ts';

import cs from './RatingSendModal.module.scss';

export const RatingSendModal = () => {
  React.useEffect(() => {
    document.body.style.overflow = 'hidden';
    return () => {
      document.body.style.overflow = 'auto';
    };
  }, []);
  useMetaTag(true, '#999999');
  const { width } = useWindowSize();
  const { closeModal } = React.useContext(ModalContext);

  return (
    <Modal className={cs.modal} isOpen onCloseClick={() => closeModal()} zIndex={1500}>
      <div className={cs.chooseConvert}>
        <FlexWrapper isCenter>
          <Image alt="Convert" className={cs.convert} height={164} src={ConvertPNG} width={164} />
        </FlexWrapper>
        <FlexWrapper>
          <h4 className={cs.titleSent}>Отзыв отправлен</h4>
        </FlexWrapper>
        {width > 1024 ? (
          <div className={cs.sent}>
            Спасибо, что помогаете&nbsp;пользователям сделать правильный
            <div>выбор, а нам узнать, что можно улучшить в материале.</div>
          </div>
        ) : (
          <div className={cs.sent}>
            Спасибо, что помогаете&nbsp;пользователям сделать правильный выбор, а нам узнать, <br></br>что можно
            улучшить в материале.
          </div>
        )}
      </div>
    </Modal>
  );
};
